// 基本信息
import { GatewayType } from "@/api/interface/iot";
import DialogBox from "@/components/DialogBox";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			productModel: [{ required: true, message: proxy?.$t("logger_basicdialog.formrule.product_model"), trigger: "change" }]
		});

		if (!props.detail.deviceType) {
			props.detail.deviceType = GatewayType.Device;
		}
		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		onMounted(() => {
			//默认为软产品
			if (!props.detail.type) {
			}
		});
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					footerLabel={[proxy?.$t("logger_basicdialog.footer_label.close")]}
					onConfirm={() => {
						validData();
					}}
				>
					<el-form class="logger-detail-form" model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.username")}>{props.detail.username}</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.uri")}>{props.detail.uri}</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.method")}>
							<el-tag type={props.detail.method == "GET" ? "" : "info"}>{props.detail.method}</el-tag>
						</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.code")}>
							<el-tag type={props.detail.code == 200 ? "success" : "danger"}>{props.detail.code}</el-tag>
						</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.ip")}>{props.detail.ip}</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.region")}>{props.detail.region}</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.latency")}>{props.detail.latency}</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.operatetime")}>{props.detail.operateTime}</el-form-item>
						<el-form-item label={proxy?.$t("logger_basicdialog.form_label.param")}>{props.detail.param || "--"}</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
